import React, { useEffect, useState } from 'react';
import TableHeader from '@/components/TableHeader/TableHeader';
import { useDispatch, useSelector } from "umi";
import SearchContainer from '@/components/SearchContainer/SearchContainer';
import DrawerDetail from '@/components/Drawer/Drawer';
import Dialog from '@/components/Dialog/Dialog';
import TableLists from './components/TableLists';
import AttendanceDetail from "./components/AttendanceDetail"
import AddAttentdance from "./components/AddAttentdance";
import SearchForm from "@/components/CommonSearchForm"
import { setIsShowAdd } from '@/utils/commonFns/commonDispatch';

export default function index() {
    const dispatch = useDispatch();
    const { attendanceSearch, attendanceTotal, attendanceLists, attendanceDetail } = useSelector(state => state.attendanceInfo);//搜索内容 总数 数据
    const { isShowAdd } = useSelector(state => state.common);
    const { page, size, queryData } = attendanceSearch;
    const [closeRight, setcloseRight] = useState(false);

    useEffect(() => {
        _initContentPage();
    }, [])

    // 初始化数据,修改页码
    function _initContentPage(page = 1, queryData = {}) {
        if (typeof queryData !== 'object') {
            queryData = {};
        }
        dispatch({
            type: "attendanceInfo/initAttendanceContent",
            payload: { page, queryData }
        })
    }

    // 设置显示隐藏
    // 重新加载
    function reload(queryData) {
        _initContentPage(1, queryData)
    }
    return (
        <div className='main-content'>
            {/* 头部定位按钮 */}
            <TableHeader
                total={attendanceTotal}
                page={page}
                size={size}
                interfaceDelMethod={"deleteAttendance"}
                changeCurrentPage={_initContentPage}
                getNewDatas={() => _initContentPage()}
                openAdd={() => setIsShowAdd(true, dispatch)}
            ></TableHeader>
            {/* 搜索内容 */}
            <SearchContainer closeRight={closeRight} setcloseRight={setcloseRight} renderForm={() => <SearchForm reload={reload}></SearchForm>}></SearchContainer>
            {/* 表格显示 */}
            <TableLists data={attendanceLists} changeDiallogValue={_initContentPage}></TableLists>
            {/* 详情展示 */}
            <DrawerDetail
                title={attendanceDetail?.staffName?.userName}
                _id={attendanceDetail?._id}
                render={() => <AttendanceDetail salaryDetail={attendanceDetail} _initSalaryList={_initContentPage}></AttendanceDetail>}
                reloadFunc={_initContentPage}
                interfaced={"deleteAttendance"}
                isStaff={true}
            />
            {/* 新增展示 */}
            <Dialog
                isShowClose={true}
                title={"新增考勤记录"}
                width={800}
                dialogStutus={isShowAdd}
                render={() => <AddAttentdance setIsShowAdd={(type) => setIsShowAdd(type, dispatch)} _initContentPage={_initContentPage}></AddAttentdance>}
                setDialogStatus={(type) => setIsShowAdd(type, dispatch)} ></Dialog>
        </div>
    )
}
